<template>
  <div class="box">
    <div class="header"></div>
    <div class="main">
      <van-nav-bar title="购物车">
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-icon name="ellipsis" size="25" color="black" />
        </template>
      </van-nav-bar>
      <button class="clearAll" @click="clearAll" v-if="cartsList.length != 0">
        清空购物车
      </button>
      <div class="carts">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车还是空空的，去添加一些吧！"
          v-if="empty"
        />
        <van-swipe-cell v-for="item in cartsList" :key="item.proid" v-else>
          <van-checkbox
            v-model="item.flag"
            @click="choose(item.cartid, item.flag)"
          ></van-checkbox>
          <van-card
            :price="item.originprice"
            desc="描述信息"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #footer>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
                @change="updateNum(item.cartid, item.num)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.cartid)"
            />
          </template>
        </van-swipe-cell>
        <van-submit-bar
          :price="SumMoney"
          button-text="提交订单"
          @submit="onSubmit"
        >
          <van-checkbox v-model="isAll">全选</van-checkbox>
          <template #tip>
            你的收货地址不支持同城送,
            <span @click="onClickEditAddress">修改地址</span>
          </template>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  doCartList,
  doChecked,
  // AddNum,
  // MinNum,
  removeOne,
  allChoose,
  doUpdate,
  cartRemoveAll,
} from "../api/cart";
import {
  Card,
  Stepper,
  SwipeCell,
  Checkbox,
  CheckboxGroup,
  Empty,
  NavBar,
  SubmitBar,
  Dialog,
  Toast,
} from "vant";

Vue.use(Card);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Empty);
Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Dialog);
Vue.use(Toast);

export default {
  data() {
    return {
      checked: "true",
      value: "2",
      cartsList: [],
      empty: true,
      orderlist:[]
    };
  },

  created() {
    // 判断用户是否已经登陆了
    if (localStorage.getItem("token")) {
      this.getcartList();
    } else {
      this.$router.push("/login");
    }
  },
  methods: {
    getcartList() {
      // 发送 获取购物车列表的请求
      doCartList({ userid: localStorage.getItem("id") }).then((res) => {
        // console.log(res.data.data);
        if (res.data.code == 10020) {
          //如果没有数据
          this.empty = true;
          this.cartsList = [];
        } else {
          this.empty = false;
          this.cartsList = res.data.data;
        }
      });
    },
    choose(cartid, flag) {
      //修改商品选中状态
      doChecked({ cartid: cartid, flag: flag }).then(() => {
        // console.log(res);
        this.getcartList();
      });
    },
    //更新数量变化
    updateNum(cartid, num) {
      doUpdate({ cartid: cartid, num: num }).then(() => {});
    },

    //删除这条商品
    del(cartid) {
      removeOne({ cartid }).then(() => {
        // console.log(res);
        this.getcartList();
      });
    },
    //提交订单
    onSubmit() {
      //如果一个都没选择就不能提交
      if (this.cartsList.some((item) => item.flag == true)) {        
        this.$router.push('/order')
      }else{
        Toast('清先选择商品哦~')
      }
    },
    onClickEditAddress() {},
    //清空购物车
    clearAll() {
      Dialog.confirm({
        message: "确定删除所有商品吗？",
      })
        .then(() => {
          cartRemoveAll({ userid: localStorage.getItem("id") }).then(() => {
            this.getcartList();
          });
        })
        .catch(() => {});
    }
  },
  computed: {
    isAll: {
      get() {
        return this.cartsList.every((item) => item.flag);
      },
      set(val) {
        this.cartsList.forEach((item) => (item.flag = val));
        allChoose({
          userid: localStorage.getItem("id"),
          type: val,
        }).then(() => {});
      },
    },
    //总价
    SumMoney() {
      let sum = this.cartsList.reduce((sum, item) => {
        if (item.flag) {
          sum += item.originprice * item.num;
        }
        return sum;
      }, 0);
      return sum * 100;
    },
  },
};
</script>
<style scoped>
.delete-button {
  height: 100%;
}
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background: #fff;
  padding-left: 0.1rem;
}
::v-deep .van-card {
  flex: 1;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.clearAll {
  color: black;
  font-size: 12px;
  margin-left: 3rem;
}
</style>
